<template>
  <!-- <h4 style="width: 100%; margin: 10px 0">局域网共享USB设备列表</h4> -->
  <el-auto-resizer style="min-height: 200px">
    <template #default="{ height, width }">
      <el-table-v2
        :columns="columns"
        :data="data"
        :width="width"
        :height="height"
        fixed
      />
    </template>
  </el-auto-resizer>
</template>

<script setup lang="ts">
import store from "~/utils/store";
import server_api from "~/utils/server_api";
import type { Column } from "element-plus";
const config = toRef(store);
const remote_list = computed(() => config.value.server.usbip.devices.remote);
const port_list = computed(() => config.value.server.usbip.port);
const data = computed(() => {
  let res = [];
  let tmp = JSON.parse(JSON.stringify(remote_list.value));
  for (let k in port_list.value) {
    const item = port_list.value[k];
    if (!tmp[item.server] || !tmp[item.server][item.device_id]) {
      tmp[item.server][item.device_id] = {
        id: item.device_id,
        ip: item.server,
        address: item.address,
        vendor: item.vendor,
        product: item.product,
        described: "copy from port",
        raw: "copy from port",
      };
    }
  }
  for (let ip in tmp) {
    for (let id in tmp[ip]) {
      let item_s = tmp[ip][id];
      let item = JSON.parse(JSON.stringify(item_s));
      item.ip = ip;
      res.push(item);
    }
  }
  return res;
});
const columns: Column<any>[] = [
  {
    key: "ip",
    dataKey: "ip",
    title: `远程IP`,
    width: 150,
    align: "center",
  },
  {
    key: "id",
    dataKey: "id",
    title: `设备ID`,
    width: 100,
    align: "center",
  },
  {
    key: "address",
    dataKey: "address",
    title: `设备地址`,
    width: 100,
    align: "center",
  },
  {
    key: "vendor",
    dataKey: "vendor",
    title: `供应商`,
    width: 300,
    align: "center",
  },
  {
    key: "product",
    dataKey: "product",
    title: `产品名称`,
    width: 300,
    align: "center",
  },
  {
    key: "described",
    dataKey: "described",
    title: `描述`,
    width: 350,
    align: "center",
  },
  {
    key: "state",
    dataKey: "id",
    title: `挂载`,
    width: 100,
    align: "center",
    cellRenderer: ({ rowData }) =>
      h(
        ElTag,
        { type: get_port_state(rowData.ip, rowData.id) ? "success" : "info" },
        () => (get_port_state(rowData.ip, rowData.id) ? "已挂载" : "未挂载")
      ),
  },
  {
    key: "functino",
    dataKey: "id",
    title: `动作`,
    width: 100,
    align: "center",
    cellRenderer: ({ rowData }) =>
      h(
        ElButton,
        {
          type: get_port_state(rowData.ip, rowData.id) ? "warning" : "success",
          loading: get_port_state(rowData.ip, rowData.id)
            ? server_api.ticks.detach > 0
            : server_api.ticks.attach > 0,
          onClick: () => {
            if (get_port_state(rowData.ip, rowData.id))
              server_api.detach(get_port(rowData.ip, rowData.id));
            else server_api.attach(rowData.ip, rowData.id);
          },
        },
        () => (get_port_state(rowData.ip, rowData.id) ? "卸载" : "挂载")
      ),
  },
];

function get_port_state(ip: string, id: string) {
  for (let k in port_list.value) {
    const item = port_list.value[k];
    if (item.server == ip && item.device_id == id) return true;
  }
  return false;
}

function get_port(ip: string, id: string) {
  for (let k in port_list.value) {
    const item = port_list.value[k];
    if (item.server == ip && item.device_id == id) return item.id;
  }
  return "";
}
</script>

<style scoped></style>
